import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import type { ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { ProCard, ProDescriptions, ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, message, Space, Image, Input, AutoComplete } from 'antd';
import { useHistory } from 'react-router-dom'
import { useState, useRef } from 'react';
import { reqActPrizeList, reqDeleteActPrize, reqKjActPrize } from '@/services/basicConsultation';
import { TableListData, TableListPagination } from './data';
import { EditModal } from './components/EditModal';
import UserHead from '@/components/UserHead'

const { Search } = Input;

export default () => {

  const histroy = useHistory()
  const [type, setType] = useState('table');
  const [open, setOpen] = useState(false);
  const [iscreated, setIscreated] = useState(true);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const actionRef = useRef<any>();
  const [activeKey, setActiveKey] = useState<any>('1');
  const [row, setRow] = useState<any>();
  const handleModal = (show: boolean, row: any = null) => {
    setRow(row);
    setIsOpen(show);
  }

  const pageSize = 10;

  const [newParams, setNewParams] = useState({})

  function onSearch(key: string | number) {
    setNewParams(prv => ({
      ...prv,
      key
    }))
  }


  const handleTableList = async (params: TableListPagination) => {
    const res = await reqActPrizeList(params);
    if (res.code === 200) {
      const { list, totalCount } = res?.data;
      return {
        data: list,
        success: true,
        total: totalCount,
      };
    }
  };
  const handleEdit = (row: any) => {
    setIsOpen(true);
    setRow(row);
    setIscreated(false);
  }
  const handleDelete = async (id: number) => {
    const res = await reqDeleteActPrize({ id })
    if (res?.code === 200) {
      message.success(res?.message)
      actionRef?.current.reload()
    }
  }
  const handleCreate = () => {
    setIsOpen(true); setRow({}); setIscreated(false);
  }
  const handleKaijiang = async () => {
    const res = await reqKjActPrize({})
    if (res?.code === 200) {
      message.success(res?.message)
      actionRef?.current.reload()
    }
  }
  const onClose = () => setOpen(false);


  // 去详情
  function goDetail(id: string) {
    histroy.push(`/basicConsultationDetail/${id}`)
  }



  const columns: ProColumns<TableListData>[] = [
    {
      title: '姓名',
      dataIndex: 'name',
      ellipsis: true,
      search: false,
      align: 'center',
      render: (text, row: any) => (
        <UserHead data={row} />
      ),
    },
    {
      title: '性别',
      key: 'sex',
      ellipsis: true,
      search: false,
      align: 'center',
      render: (text, row: any) => (
        <div>{row?.sex == 1 ? '男' : '女'}</div>
      ),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '挂号ID',
      dataIndex: 'id',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '挂号医生',
      dataIndex: 'auther',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '预约时间',
      dataIndex: 'time',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      dataIndex: 'id',
      width: 180,
      align: 'center',
      render: (text, row) => [
        <Button key='edit' type='link' icon={<FormOutlined />} onClick={() => handleEdit(row)}>问诊</Button>,
      ],
    },
  ];
  return (
    <ProCard>
      <ProTable<TableListData>
        columns={columns}
        type={type as 'table'}
        actionRef={actionRef}
        params={newParams}
        request={(params): Promise<any> => handleTableList(params)}
        pagination={{ pageSize }}
        rowKey="id"
        dateFormatter="string"
        toolBarRender={false}
        search={false}
        toolBarRender={() => [
          <Search
            key="3"
            placeholder=""
            allowClear
            enterButton="搜索"
            onSearch={onSearch}
          />,
          <Button key="4" type="primary" onClick={() => goDetail(1)}>
            基础问诊详情
          </Button>,
        ]
        }
      />
      {
        isOpen ? <EditModal isOpen={isOpen} handleModal={handleModal} row={row} actionRef={actionRef} activeKey={activeKey} /> : null
      }
    </ProCard>
  );
};

